<template>
	<view class="content">
		<u-navbar placeholder bgColor="transparent" :border="false" autoBack>
			<view slot="center">
				新增导入笔记
			</view>
		</u-navbar>
		<view class="scroll-wrap">
			<view class="" style="width: 100vw; padding: 120rpx;">
				<tn-form :model="form" ref="form" :errorType="['message']" labelWidth="200" :borderBottom="false">
					<tn-form-item label="文件姓名" prop="name" :borderBottom="false" required>
						<tn-input v-model="form.name" border />
					</tn-form-item>
					<tn-form-item label="文件" prop="intro" :borderBottom="false" required>
						<tn-input v-model="form.file" border />
					</tn-form-item>
					<tn-form-item label="笔记类型" prop="sex" :borderBottom="false" required>
						<tn-input v-model="form.type" border disabled @click="selectShow=true" />
					</tn-form-item>
				</tn-form>
			</view>
		</view>
		<tn-select v-model="selectShow" mode="single" :list="typeOptions" @confirm="confirm" :safeAreaInsetBottom="true"
			:maskCloseable="false" :searchShow="false"></tn-select>
		<tn-toast ref="toast"></tn-toast>
	</view>
</template>

<script>
	import noteInfo from '@/api/index.js';
	import loginInfo from '@/api/login.js';
	export default {
		data() {
			return {
				form: {
					name: '',
					file: '',
					typeLabel: '',
					typeValue: ''
				},
				selectShow: false,
				typeOptions: [{
						id: '0',
						label: '公开',
						value: '0',
					},
					{
						id: '1',
						label: '付费',
						value: '1'
					},
					{
						id: '2',
						label: '私密',
						value: '2'
					}
				],
			}
		},
		onLoad() {},
		onReady() {},
		mounted() {
		},
		methods: {
			confirm(e) {
				this.form.typeLabel = e[0].label
				this.form.typeValue = e[0].value
			},
		}
	}
</script>

<style lang="scss" scoped>
	.search-wrap {
		width: 400rpx;
		height: 66rpx;
		border-radius: 40rpx;
		opacity: 1;
		background: #FCFCFC;
	}

	.h1 {
		display: flex;
		align-items: center;
		font-size: 42rpx;
		font-weight: 600;
		color: #000;
		margin: 40rpx 0 40rpx 24rpx;
	}

	.scroll-wrap {
		width: 100%;
		height: calc(100vh - 200rpx);

		.scroll-view_H {
			height: 100%;

			.note-container {
				display: flex;
				flex-wrap: wrap;
				padding: 32rpx;
				box-sizing: border-box;

				.note-li {
					width: calc(100% - 20rpx);
					margin: 10rpx;
					padding: 0 24rpx;
					background: #fff;
					border-radius: 16rpx;
					overflow: hidden;
					box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.1);
				}

				.top {
					padding: 20rpx;
					display: flex;
					justify-content: space-between;
					border-bottom: 2rpx solid #f5f5f5;
					background: #fafafa;

					.top-left {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						flex: 1
					}

					.top-right {
						width: 46rpx;
						height: 46rpx;
						border-radius: 50%;
						border: 2rpx solid #000;
						font-size: 18rpx;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}

				.bottom {
					height: 140rpx;
					display: flex;
					align-items: center;
					padding: 20rpx;
				}

				.font-24 {
					font-size: 24rpx;
					color: #999;
					margin-top: 16rpx;
				}

				.shadow {
					box-shadow: inset 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
				}

				.loading-text,
				.no-more-text {
					width: 100%;
					text-align: center;
					display: flex;
					justify-content: center;
					padding: 20rpx;
					color: #999;
				}
			}
		}
	}
</style>